<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('入党宣誓管理')" />
    <style>
      .video-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
      }
      .video-card:hover {
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }
      .video-card .card-header {
        padding: 15px 20px;
        border-bottom: 1px solid #e8e8e8;
        font-weight: bold;
      }
      .video-card .card-body {
        padding: 20px;
      }
      .video-item {
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
      }
      .video-item:last-child {
        border-bottom: none;
      }
      .video-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .video-info {
        color: #666;
        font-size: 14px;
        margin-bottom: 8px;
      }
      .video-actions {
        margin-top: 10px;
      }
      .btn-video {
        margin-right: 10px;
      }
      .add-video-btn {
        margin-bottom: 15px;
      }
      /* 高层级Loading遮罩样式 */
      .upload-loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        z-index: 99999;
        justify-content: center;
        align-items: center;
      }
      .upload-loading-content {
        background: white;
        padding: 30px 40px;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        text-align: center;
        min-width: 300px;
      }
      .upload-loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #1ab394;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 15px;
      }
      .upload-loading-text {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
      }
      .upload-loading-progress {
        font-size: 14px;
        color: #666;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="container-div">
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>入党宣誓视频管理</h5>
              <div class="ibox-tools">
                <button
                  class="btn btn-primary add-video-btn"
                  onclick="addOathVideo()"
                >
                  <i class="fa fa-plus"></i> 新增入党宣誓
                </button>
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <div class="row">
                <div class="col-sm-12">
                  <div class="video-card">
                    <div class="card-header bg-primary text-white">
                      <i class="fa fa-video-camera"></i> 宣誓视频列表
                    </div>
                    <div class="card-body" id="videoList">
                      <!-- 动态加载视频列表 -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 高层级上传Loading遮罩 -->
    <div id="uploadLoadingOverlay" class="upload-loading-overlay">
      <div class="upload-loading-content">
        <div class="upload-loading-spinner"></div>
        <div class="upload-loading-text">正在上传视频文件</div>
        <div class="upload-loading-progress">请耐心等待，不要关闭页面...</div>
      </div>
    </div>

    <th:block th:include="include :: footer" />

    <!-- 新增入党宣誓弹出框 -->
    <div id="addOathModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">新增入党宣誓视频</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-3 control-label">视频标题：</label>
                <div class="col-sm-9">
                  <input
                    type="text"
                    class="form-control"
                    id="videoTitle"
                    placeholder="请输入视频标题"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">视频摘要：</label>
                <div class="col-sm-9">
                  <textarea
                    class="form-control"
                    id="videoAbstract"
                    placeholder="请输入视频摘要"
                    rows="3"
                  ></textarea>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-3 control-label">选择视频：</label>
                <div class="col-sm-9">
                  <input
                    type="file"
                    class="form-control"
                    id="videoFile"
                    accept="video/*"
                  />
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              class="btn btn-primary"
              onclick="saveOathVideo()"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <div id="videoModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">视频播放</h4>
          </div>
          <div class="modal-body">
            <video id="videoPlayer" width="100%" height="400" controls>
              您的浏览器不支持视频播放。
            </video>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      $(function () {
        loadVideoList();
      });

      // 加载视频列表
      function loadVideoList() {
        $.post(ctx + "hui/interact/oath/list", {}, function (data) {
          if (data.code === 0) {
            var videoListHtml = "";
            if (data.rows && data.rows.length > 0) {
              $.each(data.rows, function (index, item) {
                var fileSize =
                  (item.fileSize / (1024 * 1024)).toFixed(1) + " MB";
                var createTime = item.createTime || "未知";

                videoListHtml += '<div class="video-item">';
                videoListHtml +=
                  '<div class="video-title">' + item.title + "</div>";
                videoListHtml += '<div class="video-info">';
                videoListHtml +=
                  "<span>文件名：" + item.fileName + "</span> | ";
                videoListHtml += "<span>大小：" + fileSize + "</span> | ";
                videoListHtml += "<span>上传日期：" + createTime + "</span>";
                videoListHtml += "</div>";
                if (item.summary) {
                  videoListHtml += '<div class="video-info">';
                  videoListHtml += "<span>摘要：" + item.summary + "</span>";
                  videoListHtml += "</div>";
                }
                videoListHtml += '<div class="video-actions">';
                videoListHtml +=
                  '<button class="btn btn-info btn-video btn-sm" onclick="playVideo(' +
                  item.id +
                  ')">';
                videoListHtml += '<i class="fa fa-play"></i> 播放</button>';
                videoListHtml +=
                  '<button class="btn btn-success btn-video btn-sm" onclick="downloadVideo(' +
                  item.id +
                  ')">';
                videoListHtml += '<i class="fa fa-download"></i> 下载</button>';
                videoListHtml +=
                  '<button class="btn btn-danger btn-video btn-sm" onclick="deleteVideo(' +
                  item.id +
                  ')">';
                videoListHtml += '<i class="fa fa-trash"></i> 删除</button>';
                videoListHtml += "</div>";
                videoListHtml += "</div>";
              });
            } else {
              videoListHtml =
                '<div class="text-center text-muted">暂无入党宣誓视频</div>';
            }
            $("#videoList").html(videoListHtml);
          }
        });
      }

      // 新增入党宣誓
      function addOathVideo() {
        $("#addOathModal").modal("show");
      }

      // 保存入党宣誓视频
      function saveOathVideo() {
        var videoTitle = $("#videoTitle").val();
        var videoAbstract = $("#videoAbstract").val();
        var videoFile = $("#videoFile")[0].files[0];

        if (!videoTitle) {
          $.modal.msgWarning("请输入视频标题");
          return;
        }

        if (!videoFile) {
          $.modal.msgWarning("请选择视频文件");
          return;
        }

        // 创建FormData对象
        var formData = new FormData();
        formData.append("title", videoTitle);
        formData.append("summary", videoAbstract);
        formData.append("file", videoFile);

        // 显示高层级loading遮罩
        showUploadLoading();

        // 调用后端接口上传视频
        $.ajax({
          url: ctx + "hui/interact/oath/add",
          type: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function (result) {
            hideUploadLoading();
            if (result.code === 0) {
              $.modal.msgSuccess("入党宣誓视频添加成功");
              $("#addOathModal").modal("hide");
              clearForm();
              loadVideoList(); // 重新加载列表
            } else {
              $.modal.msgError(result.msg);
            }
          },
          error: function () {
            hideUploadLoading();
            $.modal.msgError("网络异常，请稍后重试");
          },
        });
      }

      // 清空表单
      function clearForm() {
        $("#videoTitle").val("");
        $("#videoAbstract").val("");
        $("#videoFile").val("");
      }

      // 显示上传Loading遮罩
      function showUploadLoading() {
        $("#uploadLoadingOverlay").css("display", "flex");
        // 禁用页面滚动
        $("body").css("overflow", "hidden");
      }

      // 隐藏上传Loading遮罩
      function hideUploadLoading() {
        $("#uploadLoadingOverlay").hide();
        // 恢复页面滚动
        $("body").css("overflow", "auto");
      }

      // 播放视频
      function playVideo(id) {
        $.get(ctx + "hui/interact/oath/getVideoUrl/" + id, function (data) {
          if (data.code === 0) {
            $("#videoPlayer").attr("src", data.url);
            $("#videoModal").modal("show");
          } else {
            $.modal.msgError(data.msg);
          }
        });
      }

      // 下载视频
      function downloadVideo(id) {
        window.open(ctx + "hui/interact/oath/download/" + id);
      }

      // 删除视频
      function deleteVideo(id) {
        $.modal.confirm("确定要删除该视频吗？", function () {
          $.post(
            ctx + "hui/interact/oath/remove",
            { ids: id },
            function (result) {
              if (result.code === 0) {
                $.modal.msgSuccess("视频删除成功");
                loadVideoList(); // 重新加载列表
              } else {
                $.modal.msgError(result.msg);
              }
            }
          );
        });
      }
    </script>
  </body>
</html>
